<template>
	<div class="tuanduirenzheng">
		<div class="breadcrumb">
			<span @click="$router.back()">
				<i class="el-icon-arrow-left"></i>返回上一页
			</span>
		</div>
		<div class="pageContent">
			<div class="contentHeader">成员个人信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;margin-bottom: 0;">
				<div>
					<el-form :model="pageData" v-if="pageData" class="demo-form-inline" label-width="12rem">
						<el-form-item label="姓名：">
							<el-input v-model="pageData.name" disabled class="ainput" placeholder="姓名"></el-input>
						</el-form-item>
						<el-form-item label="工号：">
							<el-input v-model="pageData.jobNumber" disabled class="ainput" placeholder="工号"></el-input>
						</el-form-item>
						<el-form-item label="手机号码：">
							<el-input v-model="pageData.phone" disabled class="ainput" placeholder="手机号码"></el-input>
						</el-form-item>
						<!-- <el-form-item label="主团队：">
							<el-input v-model="pageData.cardId" disabled class="ainput" placeholder="主团队"></el-input>
						</el-form-item> -->
						<!-- <el-form-item label="职务：">
							<el-input v-model="pageData.cardId" disabled class="ainput" placeholder="职务"></el-input>
						</el-form-item> -->
						<!-- <el-form-item label="职级：">
							<el-input v-model="departmentName" disabled class="ainput" placeholder="职级"></el-input>
						</el-form-item> -->
						<el-form-item label="岗位：">
							<el-input v-model="postText" disabled class="ainput" placeholder="岗位"></el-input>
						</el-form-item>
						<el-form-item label="服务范围：">
							<el-input v-model="addText" disabled type="textarea" class="ainput" placeholder="服务范围"></el-input>
						</el-form-item>
						<el-form-item label="身份信息：">
							<el-input v-model="pageData.cardId" disabled class="ainput" placeholder="暂无身份信息"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<el-image :src="pageData.head?pageData.head:$globalData.defaultImg" fit="cover" class="renzhengImgs"></el-image>
			</div>
			<div class="basicInformation flex" style="padding-left: 12rem;justify-content: space-between;">
				<div>
					<img :src="pageData.cardFront?pageData.cardFront:require('@/assets/image/working/front1.png')" class="InformationImgs" alt="">
					<!-- <el-image :src="pageData.cardFront?pageData.cardFront:require('@/assets/image/working/front.png')" fit="cover" class="InformationImgs"></el-image> -->
				</div>
				<div>
					<img :src="pageData.cardReverse?pageData.cardReverse:require('@/assets/image/working/reverse1.png')" class="InformationImgs" alt="">
					<!-- <el-image :src="pageData.cardReverse?pageData.cardReverse:require('@/assets/image/working/reverse.png')" fit="cover" class="InformationImgs"></el-image> -->
				</div>
				<div>
					<img :src="pageData.holdingCard?pageData.holdingCard:require('@/assets/image/working/hand1.png')" class="InformationImgs" alt="">
					<!-- <el-image :src="pageData.holdingCard?pageData.holdingCard:require('@/assets/image/working/hand.png')" fit="cover" class="InformationImgs"></el-image> -->
				</div>
			</div>
			<div class="contentHeader">成员就职信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;">
				<!-- <div> -->
					<el-form class="demo-form-inline" label-width="12rem"  style="width: 100%">
						<el-form-item label="就职记录：">
							<el-table :data="pageData.companyEntityList" border style="width: 100%">
							    <el-table-column prop="startTime" label="入职时间"></el-table-column>
								<el-table-column prop="outTime" label="离职时间"></el-table-column>
								<el-table-column prop="companyName" label="团队及部门"></el-table-column>
							    <!-- <el-table-column prop="address" label="职务"></el-table-column> -->
							  </el-table>
						</el-form-item>
					</el-form>
			</div>
			
		</div>
		
		<!-- <div class="hanlderBtns">
			<el-button round  type="danger" class="hanlderBtnsFunc">删除</el-button>
			<el-button round type="primary" class="hanlderBtnsFunc" @click="$router.push('/myteam/teaminfo/editormenberaudit')">修改</el-button>
		</div> -->
	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				pageData: {},
				rankDataForm: {},
				tableData: [],
				pageData:{},
				userId: '',
				// 岗位信息
				postText: '',
				// 地址信息
				addText: '',
				addList: [],
				// 职务
				departmentName: ''
			}
		},
		mounted() {
			// this.userId = this.$store.state.user.userInfo.id
			this.userId = this.$route.params.id
			this.getPageData()
		},
		methods:{
			getPageData(){
				this.$request.postForm(this.$api.getDetails,{
					userId: this.userId
				}).then(res=>{
					if(res.code == 200){
						this.pageData = res.data
						if(this.pageData){
							if(!this.pageData.rankNameEntityList){
								this.departmentName = ''
							} else {
								this.departmentName = this.pageData.rankNameEntityList.departmentName
							}
							let postList = []
							this.pageData.postEntityList.forEach((v)=>{
								postList.push(v.labelName)
							})
							this.postText = postList.join(',')
							
							this.pageData.areaEntityList.forEach((v)=>{
								this.addText = this.addText + '\n' + v.addressId
							})
							
							
								// let addList = []
							// this.pageData.areaEntityList.forEach((v)=>{
							// 	let attData = v.addressId.split(',')
							// 	if(attData[attData.length - 1]){
							// 		this.useIdQueryAddress(attData[attData.length - 1])
							// 	} else {
							// 		this.useIdQueryAddress(attData[attData.length - 2])
							// 	}
							// })
							// setTimeout(()=>{
							// 	this.addText = this.addList.join(',')
							// },300)
						}
					}
				})
			},
			// useIdQueryAddress(id) {
			// 	// 使用id查询地址
			// 	if (id) {
			// 		this.$request.postForm(this.$api.getAddressName, {
			// 			id: id
			// 		}).then(res => {
			// 			if (res.code == 200) {
			// 				// callBack(res.data.name)
			// 				this.addList.push(res.data.name)
			// 			}
			// 		})
			// 	}
			
			// }
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb {
		padding: 20px;
		border-bottom: 1px solid #DCDCDC;
		color: #333333;
		font-size: 16px;
	}

	.breadcrumb span {
		cursor: pointer;
	}

	.pageContent {
		padding: 20px;
	}

	/* .contentHeader {
		color: #333333;
		font-size: 16px;
		position: relative;
		width: 100px;
		text-align: right;
		margin-bottom: 20px;
	}

	.contentHeader::after {
		content: '';
		width: 750px;
		top: 50%;
		border-bottom: 1px dotted #DCDCDC;
		position: absolute;
		left: 120px;
	} */
.contentHeader{
		width: 100%;
		padding: 10px 20px;
		color: #333333;
		font-size: 16px;
		background: #F3F3F3;
		margin-bottom: 20px;
	}
	.teamType {
		width: 80%;
		margin-left: 10%;
		justify-content: space-evenly;
		margin-bottom: 60px;
	}

	.typeList {
		width: 100px;
		height: 110px;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		text-align: center;
		padding: 20px;
		cursor: pointer;
	}

	.typeListImage {
		width: 50px;
		height: 50px;
		border-radius: 100%;
	}

	.typeList:hover {
		border-color: #23B14D;
	}

	.ainput {
		width: 478px;
	}

	.aainput {
		width: 450px;
		margin-left: 10px;
	}

	.ael-form-item>>>.el-form-item__label {
		width: 100px !important;
	}

	.InformationUploadTip {
		padding-left: 17.2rem;
		color: #AAAAAA;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 60px;
	}

	.rankPhotos {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.rankPhotosListBox {
		width: 210px;
		height: 138px;
		border: 1px solid #DCDCDC;
		position: relative;
		text-align: center;
		margin-right: 15px;
		margin-bottom: 15px;
	}

	.deleteRankPhoto {
		color: darkred;
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 5;
		font-size: 24px;
		cursor: pointer;
		background: #fff;
		border-radius: 100%;
	}

	.InformationUpload {
		margin-right: 0;

	}

	.materials {
		width: 210px;
		height: 138px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		border: 1px solid #DCDCDC;
	}

	.materials .avatar-uploader-icon {
		width: 100%;
		height: 50px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.materials p {
		width: 100%;
		color: #AAAAAA;
		font-size: 12px;
	}

	.basicInformation {
		margin-bottom: 60px;
	}

	.renzhengImgs {
		width: 100px;
		height: 100px;
		/* margin-right: 75px; */
		border-radius: 3px;
		/* float: right; */
	}
	.hanlderBtns{
		width: 100%;
		border-top: 1px solid #DCDCDC;
		padding: 40px;
		text-align: center;
	}
	.hanlderBtnsFunc{
		width: 150px;
		margin: 0 55px;
	}
	.InformationImgs{
		width: 210px;
		height: 138px;
	}
	.demo-form-inline>>>.el-textarea__inner{
		height: 150px !important;
	}
</style>
